
<template>
  <div class="app">
    <!-- v-my="{
            curClass: 'active',
            itemClass: 'item',
            curId
         }"
    使用自定义指令，传入的参数将绑定在bindings上
    node节点可以用el获取 -->
    <div class="nav"
         v-my="{
            curClass: 'active',
            itemClass: 'item',
            curId
         }">
      <!-- <a
      v-for="item of tabData"
      :key="item.id"
      :class="['item',{active: item.id === curId}]"
      @click="changeItem(item.id)"
      >{{ item.title }}</a> -->
      <a 
        class="item"
        v-for="item of tabData" 
        :key="item.id" 
        @click="changeItem(item.id)"
      >
        {{ item.title }}
      </a>
    </div>
    <div class="page">
      <span>{{ pageItem }}</span>
    </div>
  </div>
</template>

<script>
import My from './directives/directive.js'

export default {
  name: 'App',
  // 自定义指令局部注册
  directives: {
    My
  },
  data() {
    return {
      curId:2,
      tabData: [
        {
          id: 1,
          title: 'Title-1',
          content: 'Page-1'
        },
        {
          id: 2,
          title: 'Title-2',
          content: 'Page-2'
        },
        {
          id: 3,
          title: 'Title-3',
          content: 'Page-3'
        },
        {
          id: 4,
          title: 'Title-4',
          content: 'Page-4'
        }
      ]
    }
  },
  computed: {
    pageItem() {
      return this.tabData[this.curId - 1].content;
    }
  },
  methods: {
    changeItem(id) {
      return this.curId = id;
    }
  }
}
      

</script>

<style scoped lang="scss">
.nav {
  width: 200px;
  height: 50px;
}
.item {
  float: left;
  color: #333;
  cursor: pointer;

  &.active {
    color: red;
    background-color: green;
  }
}
</style>

